<template>
  <div>
    <el-row style="margin-bottom: 15px" type="flex" align="middle">
      <el-col :span="3">
        <b style="font-size: 20px">权限管理</b>
      </el-col>
      <el-col :span="3">
        <el-select
          id="system"
          v-model="value"
          placeholder="请选择系统"
          @change="handleSystemChange"
        >
          <el-option
            v-for="item in subSystems"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <!-- 修改布局 -->
      <el-col :span="6" :offset="14">
        <el-row type="flex" align="middle">
          <el-col :span="20">
            <el-input
              placeholder="请输入员工姓名"
              prefix-icon="el-icon-search"
              v-model="searchName"
              size="medium"
              @keyup.enter.native="search(searchName)"
            >
            </el-input>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <el-table
      :data="pageInfo.list"
      border
      tooltip-effect="dark"
      stripe
      max-height="638"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" prop="name" label="姓名" width="120">
      </el-table-column>

      <el-table-column align="center" prop="jobNumber" label="工号" width="120">
      </el-table-column>

      <el-table-column align="center" label="查看权限" width="300">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.look_authority"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false"
            @change="handleLookAuthority(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column align="center" label="编辑权限" width="300">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.edit_authority"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false"
            @change="handleEditAuthority(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%; position: absolute; left: 0; bottom: 10px">
      <div style="display: flex; justify-content: center">
        <el-pagination
          :page-size="pageInfo.size"
          layout="prev, pager, next"
          :total="pageInfo.total"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  methods: {
    _initPageInfo(pageNum = 1, pageSize = 10, systemId = 0) {
      this.$axios
        .post(
          `http://localhost:8090/authority/sub?subSystemId=${systemId}&pageNum=${pageNum}&pageSize=${pageSize}`
        )
        .then((res) => {
          const data = res.data;
          if (data.code == 200) {
            // 遍历pageInfo中的所有对象,将其status对象拓展一个boolean类型的属性
            /* for (let product of data.data.list) {
						product.status.statusBoo = product.status.statusCode == 1 ? true : false;
					} */
            // 将后台数据赋值
            this.pageInfo = data.data;
          } else {
            alert(data.message);
          }
        });
    },
    handleSystemChange() {
      var systemId = this.value;
      this._initPageInfo(1, 10, systemId);
    },
    handleCurrentChange(pageNum) {
      this._initPageInfo(pageNum);
    },
    _initSubSystems() {
      this.$axios.get(`http://localhost:8090/subSystem/all`).then((res) => {
        const data = res.data;
        if (data.code == 200) {
          this.subSystems = data.data;
        } else {
          alert(data.message);
        }
      });
    },

    //批量选择时触发
    handleSelectionChange(selection) {
      this.selectionList = [];
      selection.forEach((item, index) => {
        this.selectionList.push(item);
      });
    },
    // 修改权限时触发
    handleLookAuthority(data) {
      var userId = data.user_id;
      var lookAuthority = data.look_authority;
      this.$axios
        .post(
          `http://localhost:8090/authority/updateLookAuthority?userId=${userId}&lookAuthority=${lookAuthority}`
        )
        .then((res) => {
          const data1 = res.data;
          if (data1.code == 200) {
            this.$message.success("修改成功！");
          } else {
            alert(data1.message);
          }
        });
    },
    handleEditAuthority(data) {
      var userId = data.user_id;
      var editAuthority = data.edit_authority;
      this.$axios
        .post(
          `http://localhost:8090/authority/updateEditAuthority?userId=${userId}&editAuthority=${editAuthority}`
        )
        .then((res) => {
          const data1 = res.data;
          if (data1.code == 200) {
            this.$message("修改成功！");
          } else {
            alert(data1.message);
          }
        });
    },
    search(name) {
      var subSystemId = this.value;

      this.$axios
        .post(
          `http://localhost:8090/authority/name?name=${name}&subSystemId=${subSystemId}`
        )
        .then((res) => {
          const data = res.data;
          if (data.code == 200) {
            this.pageInfo.list = data.data;
          } else {
            alert(data.message);
          }
        });
    },
    verifyToken() {
      this.$axios.post(`/user/verify`).then((res) => {
        const postData = res.data;
        console.log(postData);
        if (postData.code != 200) {
          window.sessionStorage.setItem("url",`/authority`);
          this.$message.error("请先登录");
          this.$router.push({
            path: `/login`,
          });
        }
        this.user = postData.data;
        console.log(postData);
      });
    },
  },
  created() {
    this.verifyToken();

    this._initPageInfo();
    this._initSubSystems();
  },
  data() {
    return {
      pageInfo: {}, // 存储权限信息
      subSystems: [], // 存储所有的子系统信息
      selectionList: [],

      searchName: "",
      value: "",

      user: [], //使用者信息
    };
  },
};
</script>

<style scoped>
.el-card >>> .el-card__header {
  padding: 0;
}
</style>
